<template>
    <div class="myteam">
        <div class="con">
            <van-nav-bar :border="false" title="我的邀请" left-arrow @click-left="onClickLeft" />
            <div class="top">
                <van-image round :src="userInfo.avatar" />
                <!-- <div class="tit">{{ userInfo.username }}</div> -->
                <div class="tit"></div>
                <van-button>团队等级</van-button>
            </div>
            <div class="crad">
                <div class="tit">常用工具</div>
                <div class="mid">
                    <div class="f1" @click="routerTo('myintiveinfo')">
                        <van-icon name="friends-o" />
                        <div class="text">
                            <span>我的团队</span>
                            <span>{{ total }}人</span>
                        </div>
                    </div>
                    <div class="f1"></div>
                    <div class="f1">
                        <van-icon name="gem-o" />
                        <div class="text">
                            <span>等级说明</span>
                            <span>团队等级说明</span>
                        </div>
                    </div>
                </div>
                <div class="mid">
                    <div class="f1" @click="showPopup">
                        <van-icon name="qr" />
                        <div class="text">
                            <span>邀请码</span>
                            <span>邀请码: {{ userInfo.invate_code }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 自定义图标 -->
    <van-popup v-model:show="show" round>
        <div class="intiveCode">
            <div class="tit">邀请码</div>
            <!-- <van-image :src="imgCodeUrl" /> -->
            <!-- <QRCode class="QRimage" :url="userInfo.recom_url + '?invate_code=' + userInfo.invate_code"></QRCode> -->
            <qrcode-vue id="qrcode" class="QRimage" :value="userInfo.recom_url + '?invate_code=' + userInfo.invate_code"
                size:700></qrcode-vue>

            <div class="con">
                <span>邀请码: {{ userInfo.invate_code }}</span>
                <span>|</span>
                <span>复制</span>
            </div>
            <van-button @click="handleDownloadQrIMg">保存到手机</van-button>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
// import { useStore } from 'vuex';
import { ref, onMounted } from 'vue';
import { Toast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import QRCode from '../../../components/QRCode.vue';
import QrcodeVue from 'qrcode.vue'


import { myTeam } from '../../../api/index';
let formData = new FormData();
const active = ref(0);
const router = useRouter();
// 定义onClickLeft方法
const onClickLeft = () => history.back();
const routerTo = (str: string) => router.push('/mine/myteam/' + str.toLowerCase())
const userInfo = JSON.parse(window.localStorage.getItem("userInfo") as string)
const show = ref(false);
const total = ref(0);
const qrcodeRef = ref(null);

const showPopup = () => {
    show.value = true;
};

const handleDownloadQrIMg = () => {
    // 这里是获取到的图片base64编码
    let qrcode = document.getElementById("qrcode")//获取到页面的元素
    const imgUrl = qrcode.toDataURL('image/png')
    // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
    if (window.navigator.msSaveOrOpenBlob) {
        let bstr = atob(imgUrl.split(',')[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        let blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
    } else {
        // 这里就按照chrome等新版浏览器来处理
        let a = document.createElement('a')
        a.href = imgUrl
        a.setAttribute('download', 'chart-download')
        a.click()
    }
}

const getBase64 = (url) => {
    //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
    var Img = new Image(),
        dataURL = '';
    Img.src = url;
    Img.onload = () => { //要先确保图片完整获取到，这是个异步事件
        var canvas = document.createElement("canvas"), //创建canvas元素
            width = Img.width, //确保canvas的尺寸和图片一样
            height = Img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
        dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
    };
}

onMounted(() => {
    // console.log(store.getters.getUserInfo); // 直接访问 route.params
    formData.append("page_size", "15");
    formData.append("type", "1");
    formData.append("date", ``);
    myTeam(formData).then(res => {
        console.log(res.data)
        if (res.code == 1) {
            total.value = res.data.total
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();
});
</script>

<style lang="less" scoped>
.myteam {
    background: #F6F7F9;
    width: 100%;
    height: 100vh;
    background-image: url(../../../assets/my/mytembkg.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 345px;
}

.con {
    .van-nav-bar {
        height: 52px;
        background: none;
        color: #FFFFFF;
        content: none;
    }

    .top {
        margin-top: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .van-image {
            width: 29px;
            height: 29px;
            border: 1px solid #FFFFFF;
        }

        .tit {
            font-size: 16px;
            color: #FFFFFF;
            margin: 0 12px 0 5px;
        }

        .van-button {
            width: 82px;
            height: 24px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 225px 225px 225px 225px;
            font-size: 12px;
            color: #232323;
        }
    }

    padding: 34px 20px 0;
}

.crad {
    margin-top: 20px;
    width: 334px;
    height: 171px;
    background: #FFFFFF;
    border-radius: 11px 11px 0px 0px;
    padding: 15px 22px;
    box-sizing: border-box;

    .tit {
        font-size: 16px;
        color: #3D3D3D;
        text-align: left;
    }

    .mid {
        display: flex;
        margin: 18px 0 21px;

        .f1 {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            // width: 40%;

            .van-icon {
                font-size: 24px;
            }

            .text {
                display: flex;
                text-align: left;
                justify-content: space-between;
                flex-direction: column;
                margin-left: 10px;

                span {
                    font-size: 12px;
                    color: #3D3D3D;
                    white-space: nowrap;

                    &:nth-child(2) {
                        font-size: 11px;
                        color: #85848B;
                    }
                }
            }

        }
    }
}

:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #FFFFFF;

}

:deep(.van-nav-bar__left) {
    padding: 0;
}

:deep(.van-nav-bar__content .van-nav-bar__title) {
    color: #FFFFFF;
}

// :deep(.van-hairline--bottom::after){
//     content: none;
// }
.intiveCode {
    width: 225px;
    height: 210px;
    background: #FFFFFF;
    border-radius: 13px 13px 13px 13px;
    box-sizing: border-box;
    padding: 20px auto;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .tit {
        font-size: 14px;
        color: #3D3D3D;
    }

    .QRimage {
        margin: 25px auto 20px;
    }

    .con {
        padding: 0;

        span {
            font-size: 12px;
            color: #3D3D3D;

            &:nth-child(2) {

                margin: 0 8px;
            }

            &:nth-child(3) {
                color: #0A83FD;
            }
        }
    }

    .van-button {
        margin-top: 10px;
    }
}
</style>